<template>
    <view>
        <!-- #ifndef H5 -->
        <statusBar></statusBar>
        <!-- #endif -->

        <div id="header">
            <uni-nav-bar id="navTop" title="今天不干也得干"
                         background-color="var(--bg-color)"
                         :border="false"
                         height="7vh">
            </uni-nav-bar>
        </div>

        <div class="body">
            <uni-collapse ref="collapse" id="taskList">
                <!--                <my-item @use-resize="handleUseResize" :data="listData"></my-item>-->
                <tree-item v-for="item in listData" :key="item.id" :item="item"
                           @finish-task="onItemFinish" @on-item-click="onItemClick"></tree-item>
            </uni-collapse>

            <uni-collapse ref="doneCollapse" id="doneList">
                <!--                <my-item @use-resize="handleUseResize" :data="listData"></my-item>-->
                <tree-item v-for="item in doneListData" :key="item.id" :item="item"
                           @on-item-click="onItemClick"></tree-item>
            </uni-collapse>

            <uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical"
                     :direction="direction" @fabClick="fabClick"/>

            <!--侧边弹出框-->
            <uni-drawer
                    ref="showLeft"
                    mode="left"
                    :width="320"
                    @change="change($event,'showLeft')">
                <view class="close" v-if="taskView">
                    <!-- #ifndef H5 -->
                    <statusBar></statusBar>
                    <!-- #endif -->
                    <div id="item-operate-btn-container">
                        <uni-icons @click="updateTask" type="paperplane" size="35"></uni-icons>
                        <uni-icons @click="deleteTask()" type="trash" size="35"></uni-icons>
                        <uni-icons v-if="item.status===1" @click="addBtnClicked" type="plusempty" size="35"></uni-icons>
                    </div>
                    <div>
                        <input class="title-btn" style="text-align: center"
                               v-model="item.title" placeholder="输入标题哦~~">
                    </div>
                    <div id="item-content">
                        <div id="item-base-content">
                            <view class="date-picker-view">
                                <uni-datetime-picker class="date-picker" type="date" :clear-icon="false"
                                                     style="text-align: center"
                                                     v-model="item.expectDate" @maskClick="maskClick" />
                            </view>
                            <div class="item-status">
                                <uni-icons :type="whichStatusIcon(this.item.status)" size="20"></uni-icons>
                                <text>{{ this.whichStatus(this.item.status) }}</text>
                            </div>
                            <div class="item-level">
                                <uni-icons :color="whichLevelIconColor(this.item.level)" type="circle-filled"
                                           size="20"></uni-icons>
                                <text>{{ this.whichLevel(this.item.level) }}</text>
                            </div>
                        </div>

                        <div id="item-description">
                            <textarea v-model="item.description" style="padding-top: 5vw;"
                                      placeholder="暂时没有描述哦~~">
                            </textarea>
                        </div>
                    </div>
                </view>

                <view class="close" v-if="taskAdd">
                    <!-- #ifndef H5 -->
                    <statusBar></statusBar>
                    <!-- #endif -->
                    <div id="item-operate-btn-container">
                        <uni-icons @click="closeDrawer('showLeft')" type="undo" size="35"></uni-icons>
                        <uni-icons @click="addTask" type="paperplane" size="35"></uni-icons>
                    </div>
                    <div id="item-base-content-add">
                        <input class="titleInp" v-model="newItem.title" placeholder="标题"></input>

                        <view>
                            <uni-data-select
                                    class="select-box"
                                    v-model="newItem.status"
                                    :localdata="statusList"
                                    placeholder="选择状态"
                            ></uni-data-select>
                            <uni-data-select
                                    class="select-box"
                                    v-model="newItem.level"
                                    :localdata="levelList"
                                    placeholder="选择等级"
                            ></uni-data-select>
                        </view>
                    </div>
                    <div id="item-description" style=" background-color: var(--bg-color-deep); height: 70%">
                            <textarea v-model="newItem.description" style="padding-top: 5vw"
                                      placeholder="输入描述~~~">
                            </textarea>
                    </div>
                </view>
            </uni-drawer>
        </div>
    </view>
</template>

<script>
    import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
    import UniNavBar from "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
    import UniCollapse from "../../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";
    import UniCollapseItem from "../../uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue";
    import TreeItem from "../../component/TreeItem.vue";
    import UniDrawer from "../../uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue";
    import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
    import UniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
    import UniFab from "../../uni_modules/uni-fab/components/uni-fab/uni-fab.vue";
    import UniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
    import UniDatetimePicker
        from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue";

    export default {
        onPullDownRefresh() {
            // 数据刷新完毕后，需要调用uni.stopPullDownRefresh()来停止下拉刷新动画
            this.getListData(1);
            this.getListData(2);
            uni.stopPullDownRefresh();
        },
        components: {
            UniDatetimePicker,
            UniSection,
            UniFab,
            UniDataSelect,
            UniIcons,
            UniDrawer,
            TreeItem,
            UniCollapseItem,
            UniCollapse,
            UniNavBar,
            statusBar
        },
        data() {
            return {
                horizontal: 'right',
                vertical: 'bottom',
                direction: 'horizontal',
                pattern: {
                    color: '#7A7E83',
                    backgroundColor: '#fff',
                    selectedColor: '#007AFF',
                    buttonColor: '#007AFF',
                    iconColor: '#fff'
                },
                is_color_type: false,
                taskView: false,
                taskAdd: false,
                statusList: [
                    {value: 1, text: "待办"},
                    {value: 2, text: "已完成"},
                    {value: 3, text: "已取消"},
                ],
                levelList: [
                    {value: 1, text: "不急不急慢慢来"},
                    {value: 2, text: "很急但不重要"},
                    {value: 3, text: "重要，但别慌"},
                    {value: 4, text: "赶紧赶紧很重要"}
                ],
                msgType: '',
                msgText: '',
                listData: [],
                doneListData: [],
                //#ifndef H5
                prefix: 'https://346d026f.r18.cpolar.top/',
                //#endif
                showLeft: false,
                item: {
                    id: 0,
                    title: "",
                    description: "",
                    expectDate: "2024-12-25",
                    createTime: "",
                    status: 1,
                    level: 4
                },
                newItem: {
                    title: "",
                    description: "",
                    expectDate: "",
                    status: 1,
                    level: 0,
                    parentId: 0
                }
            };
        },

        methods: {
            whichStatus(status) {
                let statusStr = ['待办', '已完成', '已取消'];
                return statusStr[status - 1];
            },
            whichLevel(level) {
                let levelStr = ['不急不急慢慢来', '很急但不重要', '重要，但别慌', '赶紧赶紧很重要'];
                return levelStr[level - 1];
            },
            whichStatusIcon(status) {
                let statusIconStr = ['circle', 'circle-filled', 'close'];
                return statusIconStr[status - 1];
            },
            whichLevelIconColor(level) {
                let levelColor = ['#0bc997', '#f1e109', '#0053ff', 'red'];
                return levelColor[level - 1];
            },

            maskClick(e) {
                console.log('maskClick事件:', e);
            },

            /**
             * 发送请求
             * @param url
             * @param method
             * @param params
             * @param header
             * @param success
             * @param fail
             */
            sendRequest(url, method, params, header, success, fail) {
                uni.request({
                    url: url,
                    method: method,
                    data: params,
                    success: success,
                    fail: fail,
                    header: header
                });

            },

            /**
             * 处理页面尺寸变化
             */
            handleUseResize() {
                this.$refs.collapse.resize();
            },

            /**
             * 任务被点击
             */
            onItemClick(item) {
                this.showDrawer('showLeft', item)
            },

            confirm() {
            },

            /**
             * 打开窗口
             * @param e
             * @param item
             */
            showDrawer(e, item) {
                if (item == null) {
                    this.taskAdd = true;
                    this.taskView = false;
                    console.log(this.taskAdd);
                    console.log(this.taskView);
                    this.$refs[e].open();
                    return;
                }

                this.taskAdd = false;
                this.taskView = true;
                console.log('我被点击了:', item.id);
                this.item.id = item.id;
                this.item.title = item.title;
                this.$refs[e].open();

                //发送请求获取任务数据
                console.log("查询任务");
                let url = '';
                if (this.prefix == null) {
                    url = "/api/zwart/user/task?id=" + item.id;
                } else {
                    url = this.prefix + "/zwart/user/task?id=" + item.id;
                }

                this.sendRequest(
                        url, "GET", null, null,
                        (res) => {
                            this.item = res.data.data;
                            let date = new Date(res.data.data.expectDate);
                            // 转换为本地时间，并格式化为YYYY-MM-DD
                            this.item.expectDate = date.getFullYear() + '-' +
                                    ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                                    ('0' + date.getDate()).slice(-2);
                            console.log("查询成功！" + JSON.stringify(this.item));
                        },
                        (res) => {
                            console.log("查询失败：" + res);
                        }
                )
            },

            /**
             * 关闭窗口
             * @param e
             */
            closeDrawer(e) {
                this.$refs[e].close();
                this.taskAdd = false;
                this.taskView = true;
                this.item = {
                    id: 0,
                    title: "",
                    description: "",
                    expectDate: "2024-12-25",
                    createTime: "",
                    status: 1,
                    level: 4
                };
                this.newItem = {
                    title: "",
                    description: "",
                    expectDate: "",
                    status: 1,
                    level: 0,
                    parentId: 0
                };
            },

            /**
             * 抽屉状态发生变化触发
             * @param e
             * @param type
             */
            change(e, type) {
                console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
                this[type] = e

            },

            /**
             * 任务被完成
             * @param item
             */
            onItemFinish(item) {
                console.log('完成任务' + item.id);
            },

            /**
             * 修改任务
             */
            updateTask() {
                console.log('修改任务' + this.item.id);
                let url = '';
                if (this.prefix == null) {
                    url = "/api/zwart/user/task";
                } else {
                    url = this.prefix + "/zwart/user/task";
                }
                this.sendRequest(
                        url, "PUT", this.item,
                        {
                            'Content-Type': 'application/json'
                        },
                        () => {
                            console.log("修改成功");
                            this.getListData(1);
                            this.getListData(2);
                            this.closeDrawer('showLeft');
                        },
                        (res) => {
                            console.log("修改失败");
                        }
                )
            },

            /**
             * 删除任务
             */
            deleteTask() {
                console.log('删除任务' + this.item.id);
                let url = '';
                if (this.prefix == null) {
                    url = "/api/zwart/user/task?taskId=" + this.item.id;
                } else {
                    url = this.prefix + "/zwart/user/task?taskId=" + this.item.id;
                }

                this.sendRequest(
                        url, "DELETE", null, null,
                        () => {
                            console.log("删除成功");
                            this.getListData(1);
                            this.getListData(2);
                            this.closeDrawer("showLeft")
                        },
                        (res) => {
                            console.log("删除失败！" + res);
                        }
                )
            },

            /**
             * 想要添加按钮被点击
             */
            addBtnClicked() {
                console.log("要开始添加任务了")
                this.taskView = !this.taskView;
                this.taskAdd = !this.taskAdd;
            },

            /**
             * 添加任务
             */
            addTask() {
                console.log('添加任务' + this.newItem.title);
                let url = '';
                if (this.prefix == null) {
                    url = "/api/zwart/user/task/insert";
                } else {
                    url = this.prefix + "/zwart/user/task/insert";
                }

                this.newItem.parentId = this.item.id;
                this.sendRequest(
                        url, "POST", this.newItem,
                        {
                            'Content-Type': 'application/json'
                        },
                        (res) => {
                            console.log("添加成功：" + res);
                            this.closeDrawer('showLeft');
                            this.newItem = {
                                title: "",
                                description: "",
                                expectDate: "",
                                status: 1,
                                level: 0,
                                parentId: 0
                            };
                            //刷新数据
                            this.getListData(1);
                        },
                        (res) => {
                            console.log("添加失败：" + res);
                        }
                )


            },

            /**
             * 获取数据
             * @param status
             */
            getListData(status) {
                console.log('获取数据');
                let url = '';
                if (this.prefix == null) {
                    url = "/api/zwart/user/task/list?status=" + status + "&keyword=";
                } else {
                    url = this.prefix + "/zwart/user/task/list?status=" + status + "&keyword=";
                }

                return new Promise((resolve, reject) => {
                            this.sendRequest(
                                    url, 'GET', null, null,
                                    (res) => {
                                        if (status === 1) {
                                            this.listData = res.data.data;
                                            this.$refs.collapse.resize();
                                        } else if (status === 2) {
                                            this.doneListData = res.data.data;
                                            this.$refs.doneCollapse.resize();
                                        }
                                        console.log("获取数据成功", res.data.data)
                                        resolve();
                                    },
                                    (res) => {
                                        console.log("获取数据失败", res);
                                    }
                            )
                        }
                )


            },

            /**
             * 点击悬浮按钮
             */
            fabClick() {
                this.showDrawer('showLeft');
            }
        },
        mounted() {
            /*setTimeout(() => {
                this.$refs.collapse.resize();
            }, 200);*/
            uni.showLoading({
                title: '加载中...'
            });

            Promise.all(
                    [this.getListData(1),
                        this.getListData(2)])
                    .then(() => {
                        uni.hideLoading();
                    })
        }
    }
</script>

<style lang="scss">
    @import '/static/customicons.css';

    tree-item {
        margin-bottom: 2vh;
    }

    .sub-list {
        margin-left: 6vw; /* 子列表左侧内边距 */
    }

    #header {

    }

    ::v-deep .uni-nav-bar-text {
        font-size: 6vw;
    }

    #doneList {
        position: absolute;
        bottom: 5vh
    }

    #item-content {
        width: 100%;
        height: 100%;
        background-color: var(--bg-color);
    }

    #item-base-content {
        background-color: #fad7da;
        width: 100%;
        height: 25%;
        display: flex;
        flex-wrap: wrap;
    }

    #item-description {
        height: 55%;
        font-size: 6vw;
        letter-spacing: 0.2em;
        padding-left: 5vw;
    }

    .close {
        position: relative;
        height: 100%;
    }

    .item-expectDate {
        width: 100%;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5vw;
        background-color: var(--bg-color);
        color: #000;
        margin-bottom: -10%;
        margin-top: 5%;
    }

    .item-status,
    .item-level {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.5vw;
        background-color: var(--bg-color);
        color: #000;
    }

    .item-status {
        width: 40%;
        height: 25%;
    }

    .item-level {
        width: 60%;
        height: 25%;
    }

    #item-operate-btn-container {
        background-color: var(--bg-color);
        display: flex; /* 使用Flexbox布局 */
        justify-content: space-around; /* 将子元素分布在容器的两端 */
        align-items: center; /* 垂直居中子元素 */
        width: 100%; /* 可以根据需要设置宽度，或者让容器自适应内容宽度 */
        height: 5%;
    }

    .title-btn {
        background-color: #f6eefd;
        height: 7vh;
    }

    .titleInp {
        background-color: #f0e0ff;
        padding-left: 5vw;
        margin-top: 2vh;
        height: 20%;
    }

    #item-base-content-add {
        height: 30%;
        background-color: var(--bg-color);
    }

    .select-box {
        background-color: var(--bg-color-deep);
        margin-top: 5vh;
        display: inline-block !important;
        width: 50% !important;
    }

    ::v-deep .uni-select {
        height: 100rpx !important;
    }

    .date-picker-view {
        width: 100%;
    }

    .date-picker{
        font-size: 5vh;
        width: 100%;
    }
</style>
